<template>
	<view class="content">
		<view class="info-bg">
		  <image class="fengrui-img" src="../../static/images/infobg.png" mode="aspectFill" />
		  <view class="info-img">
		    <image class="fengrui-img" :src="web+data.url" mode="aspectFit" />
		  </view>
		</view>
		<view class="page-order-det">
			
			
			<view class="body" :style="Til.basic.dir">
				
				<view class="goods-info">
					<view class="title"> {{data.name}} </view>
					<view class="delivery" v-if="data.izfs=='1'">
						<text class="label">{{ Til.detail.hqfs }}</text>
						<text class="value">{{ Til.detail.hqgm }}</text>
					</view>
					<view class="delivery" v-if="data.izfs=='2'">
						<text class="label">{{ Til.detail.hqfs }}</text>
						<text class="value">{{ Til.detail.hqad }}</text>
					</view>
					<view class="delivery" v-if="data.izfs=='0'">
						<text class="label">{{ Til.detail.hqfs }}</text>
						<text class="value">{{ Til.detail.hqfr }}</text>
					</view>
					<view class="discount" v-if="data.izfs=='1'">
						<text class="name">{{ Til.detail.dj }}</text>
						<view class="price"> ￥<text>{{data.money}}</text> </view>
					</view>
					<view class="discount" v-if="data.izfs=='2'">
						<text class="name">{{ Til.detail.dj }}</text>
						<view class="price"> ￥<text>{{ Til.detail.wu }}</text> </view>
					</view>
					<view class="discount" v-if="data.izfs=='0'">
						<text class="name">{{ Til.detail.dj }}</text>
						<view class="price">{{ Til.detail.free }}</view>
					</view>
					<view class="discount">
						<text class="name">{{ Til.detail.shu }}</text>
						<view class="price"> <uv-number-box v-model="shuliang" :min="1" :max="1" @change="valChange"></uv-number-box></view>
					</view>
					
				</view>
				<view class="order-info">
					<view class="title">{{ Til.detail.kmjs }}</view>
					<view class="list">
						<view class="item">
							<text class="label">{{ data.introduce }}</text>
						</view>
					</view>
				</view>
				<view class="order-pay" v-if="data.izfs=='1'">
					<!-- 支付 -->
					<view class="total">
						<text class="name">{{ Til.detail.hj }}：</text>
						<text type="price" :size="30">{{data.money}}</text>
					</view>
					<view class="btn" @click="paymini()">
						<view class="go-pay"><ayi-button size="mini">{{ Til.detail.pay }}</ayi-button></view>
					</view>
				</view>
				<view class="order-pay" v-if="data.izfs=='0'">
					<!-- 免费 -->
					<view class="total">
						<text class="name">{{ Til.detail.zhu }}：</text>
						<text type="price" :size="30">{{ Til.detail.ckm }}</text>
					</view>
					<view class="btn" @click="ok(trade_no)">
						<view class="go-pay"><ayi-button size="mini">{{ Til.detail.hq }}</ayi-button></view>
					</view>
				</view>
				<view class="order-pay" v-if="data.izfs=='2'">
					<!-- 广告 -->
					<view class="total">
						<text class="name">{{ Til.detail. gg}}</text>
					</view>
					<view class="btn">
						<view class="go-pay" @click="adbaxla()"><ayi-button size="mini">{{ Til.detail.qgg }}</ayi-button></view>
					</view>
				</view>
			</view>
		</view>
 <view v-if="isfaka" class="mask">
			<view class="messBox">
				<view class="wrapBox">
					<view class="titler">{{ Til.detail.hqcg }}</view>
					<view class="desc">
						<view>{{ Til.detail.mykm }}：{{izkami}}</view>
						<view>{{data.usetip}}</view>
					</view>
					<view class="btnbox">
						<view class="btnUp" @click="koqur">{{ Til.detail.cpkm }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import utils from '@/utils/utils.js';
	let rewardedVideoAd = null;
	var app = getApp()
	export default{
		data(){
			return{
				data:[],
				cid:'',
				
				examine:'',
				izkami:'',
				izsm:'',
				isfaka:false,
				shuliang:'1',
				web:'',
				jlad:''
				
				
			}
		},   
		computed: {
		    Til() {
		        return this.$t('message');
		    }
		},
		onLoad(e) {
			var t = this;
			t.web = getApp().globalData.request_url
			t.cid = e.cid
			uni.getStorage({
			  key: 'izdata',
			  success: function (res) {
			    if (res.data) {
			    	t.jlad = res.data.adVideoId
			    }
			  }
			});
			t.gocid()
		},
		//#ifdef MP-WEIXIN
		onShareAppMessage: function () {
		      return {
		          title: this.data.data.shareTitle,
		          path:  'pages/detail/detail?cid=' + this.cid
		      }
		  },
		  // #endif
		methods:{
			// 广告获取
			adbaxla(){
				       var that = this;
					   var trade_no = utils.buildOrderNo();
				        let videoAd = wx.createRewardedVideoAd({
				            adUnitId: that.jlad})
				        videoAd.onError(function (res) {
				            console.log('监听广告错误 请检查网络', res)})
				        videoAd.onLoad(function (res) {
				            console.log('监听广告加载', res)})
				        videoAd.onClose(res => {
				            if (res.isEnded) {
				                console.log('成功', res)
									that.ok(trade_no);
				            } else {
				                wx.showToast({
				                    title: '中间关闭广告',
				                    icon: 'none',
				                    duration: 3000})}})
				        videoAd.load()
				            .then(() => {
				                console.log('激励视频加载成功')
				                videoAd.show()
				                    .then(() => {
				                        console.log('激励视频 广告显示成功')})
				                    .catch(err => {
				                        console.log('激励视频 广告显示失败')})})
				            .catch(err => {
				                console.log('激励视频加载失败');
								uni.showToast({
									icon:'error',
									title:'激励视频加载失败'
								})
				            })
			      },
				  valChange(e) {
				  				console.log('当前值为: ' + e.value)
				  			},
			// 购买
			paymini: function() {
				 var that = this;
				        uni.showLoading({
				            title: "加载中"
				        });
				        var trade_no = utils.buildOrderNo();
				        var content = JSON.stringify({
				            order: trade_no,
				            cid: that.cid,
				            name: that.data.name
				        });
						uni.login({
						            success: function success(code) {
										console.log(code)
						                uni.request({
						                    url:  app.globalData.request_url + 'Api/submit.php',
						                    method: "POST",
						                    data: {
						                        content: content,
						                        code: code.code
						                    },
						                    header: {
						                        "content-type": "application/x-www-form-urlencoded; charset=utf-8"
						                    },
						                    success: function success(res) {
						                        console.log(res);
						                        if (res.data.code == 200) {
						                            uni.hideLoading();
						                              uni.requestPayment({
						                                //调起支付
						                                //下边参数具体看微信小程序官方文档
						                                timeStamp: res.data.timeStamp,
						                                nonceStr: res.data.nonceStr,
						                                package: res.data.package,
						                                signType: res.data.signType,
						                                paySign: res.data.paySign,
						                                success: function success(res) {
						                                    console.log("支付成功", res);
						                                    that.ok(trade_no);
															
						                                },
						                                fail: function fail(eer) {
															
						                                    console.log("支付失败", eer);
						                                    uni.showModal({
						                                        title: "提示",
						                                        content: "支付失败，重新支付",
						                                        showCancel: !1,
						                                        confirmText: "ok",
						                                        success: function success() {}
						                                    });
						                                }
						                            });
						                        } else {
						                            uni.hideLoading();
													
						                            uni.showModal({
						                                title: "提示",
						                                content: res.data.msg,
						                                showCancel: !1
						                            });
						                        }
						                    },
						                    fail: function fail() {
												
						                        uni.showModal({
						                            title: "提示",
						                            content: "创建订单失败",
						                            showCancel: !1
						                        });
						                    }
						                });
						            }
						        });
					},
					ok: function ok(trade_no) {
					    var that = this;
					    uni.login({
					        success: function success(code) {
					            var encodedCode = encodeURIComponent(code.code);
					            var encodedCid = encodeURIComponent(that.cid);
					            var encodedTradeNo = encodeURIComponent(trade_no);
					            
					            var url = "/Api/getCarmel.php?code=" + encodedCode + "&cid=" + encodedCid + "&trade_no=" + encodedTradeNo;
					            
					            utils.getRequest(url).then(function(res) {
					                console.log(res);
					                if (res.data.code == 200) {
					                    that.isfaka = true;
					                    that.izkami = res.data.carmel;
					                } else {
					                    uni.showModal({
					                        title: "提示",
					                        content: res.data.msg,
					                        showCancel: !1,
					                        confirmText: "我知道了",
					                        success: function success() {
					                        }
					                    });
					                }
					            }).catch(function(res) {
					                uni.showModal({
					                    title: "提示",
					                    content: "网络请求超时",
					                    confirmText: "重试",
					                    success: function success() {
					                        that.qayt();
					                    }
					                });
					            });
					        },
					        fail: function fail(eer) {
					            uni.showModal({
					                title: "提示",
					                content: "网络请求超时",
					                confirmText: "重试",
					                success: function success() {
					                    that.qayt();
					                }
					            });
					        }
					    });
					},
				qayt(){
					uni.navigateTo({
						url:'/pages/index/index'
					})
				},
			koqur() {
				var t = this;
			  uni.setClipboardData({
			    data:t.izkami ,
			    success() {
			      uni.showToast({
			        title: '复制成功',
			        icon: 'success'
			      });
			    },
			    fail() {
			      uni.showToast({
			        title: '复制失败',
			        icon: 'none'
			      });
			    }
			  });
			  t.isfaka = false
			},
			gocid() {
			  var that = this;
			  uni.login({
			    success: function(code) {
			      utils.getRequest("/Api/izkm.php?code=" + code.code + "&cid=" + that.cid).then(function(res) {
			        console.log(res);
			        if (res.data.code == 200) {
			          // 如果请求成功
			          that.data = res.data.data;
			        } else {
			          // 如果请求失败，弹出提示框
			          uni.showModal({
			            title: "提示",
			            content: res.data.msg,
			            showCancel: false,
			            confirmText: "重试",
			            success: function() {
			              uni.navigateBack()
			            }
			          });
			        }
			      }).catch(function(res) {
			        // 如果请求出现异常，弹出提示框
			        console.log(res);
			        uni.showModal({
			          title: "提示",
			          content: "网络错误",
			          confirmText: "重试",
			          success: function() {
			            uni.navigateBack()
			          }
			        });
			      });
			    }
			  });
			},

		}
	}
</script>

<style lang="scss">
	/* By izharBegim */
	
	
	.info-bg {
	  height: 500rpx;
	  width: 100%;
	  position: relative;
	}
	
	.info-img {
	      position: absolute;
	      right: 25rpx;
	      top: 0%;
	      height: 540rpx;
	      width: 710rpx;
	}
	
	
	.page-order-det {
		position: relative;
	
		.top {
			width: 100%;
			height: 548rpx;
			margin-top: -44px;
			background: linear-gradient(180deg, red 80%, #f7f7f7 100%);
		}
	
		.body {
			position: absolute;
			top: 39rpx;
			width: 100%;
			padding-bottom: 140rpx;
	
			.status {
				display: flex;
				align-items: center;
				width: calc(100% - 64rpx);
				margin: 0 32rpx 50rpx 32rpx;
				padding: 52rpx 30rpx;
				box-sizing: border-box;
				background-color: #ffffff;
				border-radius: 8rpx;
	
				.s-img {
					display: block;
					width: 58rpx;
					height: 58rpx;
					margin-right: 24rpx;
				}
	
				.status-name {
					display: block;
					font-size: 40rpx;
					font-weight: 500;
					color: #565656;
				}
	
				.tips {
					font-size: 24rpx;
					font-weight: 400;
					color: #ababab;
				}
			}
	
			.goods-info {
				width: calc(100% - 64rpx);
				    margin: 0 32rpx 20rpx 32rpx;
				    padding: 52rpx 30rpx 7rpx 30rpx;
				    box-sizing: border-box;
				    background-color: #ffffff;
				    border-radius: 8rpx;
	
				.title {
					padding-bottom: 20rpx;
					border-bottom: solid 2rpx #e8e8e8;
					font-size: 36rpx;
					font-weight: 500;
					color: #333333;
				}
	
				.list {
					margin-bottom: 36rpx;
					border-bottom: solid 2rpx #e8e8e8;
	
					.item {
						display: flex;
						position: relative;
						padding: 30rpx 0;
	
						.preview {
							display: block;
							width: 188rpx;
							height: 188rpx;
							margin-right: 20rpx;
						}
	
						.main {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
	
							.info {
								.name {
									display: block;
									font-size: 32rpx;
									font-weight: 400;
									color: #333333;
								}
	
								.size {
									font-size: 24rpx;
									font-weight: 400;
									color: #8e8e8e;
								}
							}
	
							.price {
								font-size: 32rpx;
								font-weight: bold;
								color: #343434;
							}
						}
	
						.buy-num {
							position: absolute;
							top: 0;
							right: 0;
							font-size: 28rpx;
							font-weight: 400;
							color: #8e8e8e;
						}
					}
				}
	
				.delivery {
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;
	
					.label {
						display: block;
						flex: 1;
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
					}
	
					.value {
						font-size: 28rpx;
						font-weight: 400;
						color: #8e8e8e;
					}
				}
	
				.discount {
					display: flex;
					align-items: center;
					margin-bottom: 38rpx;
	
					.name {
						flex: 1;
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
					}
	
					.price {
						font-size: 28rpx;
						font-weight: 400;
						color: red;
					}
				}
	
				.pay {
					display: flex;
					justify-content: flex-end;
					align-items: flex-end;
					float: left;
	
					.name {
						display: block;
						margin-right: 10rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #343434;
					}
	
					.price {
						font-size: 36rpx;
						font-weight: 500;
						color: red;
					}
				}
			}
	
			.order-info {
				width: calc(94% - 45rpx);
				    margin: auto;
				    padding: -43rpx 28rpx 1rpx 30rpx;
				    box-sizing: border-box;
				    background-color: #ffffff;
	
				.title {
					margin-bottom: 36rpx;
					padding-bottom: 20rpx;
					border-bottom: solid 2rpx #e8e8e8;
					font-size: 36rpx;
					font-weight: 500;
					color: #333333;
				}
	
				.list {
					.item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 40rpx;
	
						.label {
							font-size: 28rpx;
							font-weight: 400;
							color: #333333;
						}
	
						.value {
							font-size: 28rpx;
							font-weight: 400;
							color: #8e8e8e;
						}
					}
				}
			}
	
			.order-pay {
				display: flex;
				    align-items: center;
				    position: fixed;
				    right: 25px;
				    bottom: calc(50rpx + env(safe-area-inset-bottom));
				    width: 90%;
				    height: 50px;
				    padding: 0 32rpx;
				    background-color: #07c766;
				    box-sizing: border-box;
				    border-radius: 20rpx;
	
				.total {
					display: flex;
					align-items: center;
					flex: 1;
	
					.name {
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;
					}
				}
	
				.btn {
					display: flex;
	
					.cancel {
						margin-right: 16rpx;
					}
	
					.go-pay {
						:deep(.ayi-button) {
							background-color: #343434;
						}
	
						:deep(.ayi-button__text) {
							color: #ffffff;
						}
					}
				}
			}
		}
	}
	.mask{
		position: fixed;
		top: 0;
		left:0;
		width: 100%;
		height: 100%;
		z-index:888;
		background-color: #1a1a1ba6;
	}
	.wrapBox{
		background-color: #fff;
		border-radius: 20rpx;
		padding:30rpx;
		
		
	}
	.detail-desrc{
		margin-top: 40rpx;
		overflow: auto;
	}
	.desc{
		height:400rpx;
		margin-top:20rpx;
		font-size: 30rpx;
	}
	.titler{
		text-align:center;
		font-size: 32rpx;
		font-weight: bold;
	}
	.btnbox{
		display: flex;
		justify-content: space-around;
		margin:40rpx 0rpx 20rpx 0rpx;
		margin-top:-10rpx;
	}
	.btnno{
		padding:10rpx 30rpx;
		background-color: #f8f8f8;
		border-radius: 10rpx;
		font-size: 30rpx;
		color:#666;
	}
	.btnUp{
		padding:10rpx 30rpx;
		background-color: #4884FF;
		border-radius: 10rpx;
		font-size: 30rpx;
		color:#fff;
	}
	.messBox{
		position: fixed;
		z-index:998;
		width:80%;
		left:10%;
		padding:10rpx 0rpx;
		top: 20%;
		
	}
</style>